<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="box">
        <div>
            <h1>商品列表</h1>
            <ul>
                <li v-for="(item,index) in arr" :key="item.id">
                    <span>{{item.name}}&emsp;</span><span>{{item.price | pri()}}&emsp;</span><button
                        @click="incar(item.pid)">加入购物车(可重复加入)</button>
                </li>
            </ul>
        </div>
        <div>
            <h1>购物车</h1>
            全选：<input type="checkbox" @click="aller()" v-model="allis">
            <button @click="clearer()">清空购物车</button><br>
            <span>{{zong | allpri()}}</span>
            <ul>
                <li v-for="(item,index) in car" :key="item.id">
                    <input type="checkbox" v-model="item.iss"
                        @change="xuan()"><span>{{item.name}}&emsp;</span><span>{{item.price |
                        pri()}}&emsp;</span><button @click="jian(item.id)">-</button><span>{{item.num}}</span><button
                        @click="jia(item.id)">+</button><button @click="dele(item.id)">删除</button>
                </li>
            </ul>
        </div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                arr: [
                    {
                        name: "商品1",
                        price: 1,
                        pid: 1
                    }, {
                        name: "商品2",
                        price: 2,
                        pid: 2
                    }, {
                        name: "商品3",
                        price: 3,
                        pid: 3
                    }, {
                        name: "商品4",
                        price: 4,
                        pid: 4
                    }
                ],
                car: [],
                suanprice: [],
                allis: false,
                // allmoney: 0
            },
            methods: {
                incar(id) {
                    var a = this.arr.findIndex(item => item.pid == id)
                    if (this.car.every(item => item.pid != this.arr[a].pid)) {
                        this.car.push({
                            name: this.arr[a].name,
                            price: this.arr[a].price,
                            id: this.car.length,
                            pid: this.arr[a].pid,
                            num: 1,
                            iss: false
                        })
                    } else {
                        var b = this.car.findIndex(item => item.pid == id)
                        this.car[b].num++
                    }

                },
                dele(id) {
                    var a = this.car.findIndex(item => item.id == id)
                    this.car.splice(a, 1)
                },
                jian(id) {
                    var a = this.car.findIndex(item => item.id == id)
                    if (this.car[a].num > 1) {
                        this.car[a].num -= 1
                    }

                },
                jia(id) {
                    var a = this.car.findIndex(item => item.id == id)
                    this.car[a].num += 1
                },
                aller() {
                    if (this.allis == false) {
                        this.car.forEach(item => {
                            item.iss = true
                        });
                    } else {
                        this.car.forEach(item => {
                            item.iss = false
                        });
                    }
                },
                clearer() {
                    this.car = []
                    this.allis=false
                },
                xuan() {
                    if (this.car.every(item => item.iss == true)) {
                        this.allis = true
                    } else {
                        this.allis = false
                    }
                }
            },
            computed: {
                zong() {
                    var numb = 0
                    var allmoney = 0
                    this.car.forEach(item => {
                        if (item.iss == true) {
                            numb = item.price * item.num
                            allmoney += numb
                        }
                    })
                    return allmoney
                }
            },
            filters: {
                pri(a) {
                    return "$" + a + ".00"
                },
                allpri(a) {
                    return b = "勾选自动计算总价:" + "$" + a
                }
            }
        })
    </script>
</body>

</html>